<%--
  Created by IntelliJ IDEA.
  User: dds135246
  Date: 2020/8/13
  Time: 8:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="/static/css/reset.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1981790_zwewl19ropp.css">

    <style>
        body {
            /*text-align: unset;*/
            font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
            color: #333333;
            background-color: #ffffff;
            min-width: 1226px;
        }

        .mi-rules {
            text-align: left;
        }

        .mi-rules .mi-pages {
            background: #f5f5f5;
            padding-bottom: 50px;
        }

        .mi-container {
            width: 1226px;
            margin-right: auto;
            margin-left: auto;
        }

        /*“购物流程”导航栏>*/
        .mi-rules .mi-pages .mi-breadcrumbs {
            height: 40px;
            line-height: 40px;
            font-size: 12px;
        }

        .mi-rules .mi-pages .mi-breadcrumbs .mi-container > span, span a {
            color: #616161;
            text-decoration: none;
        }

        /*“购物流程”主体*/
        .mi-rules .mi-pages .mi-aptitude-list {
            display: flex;
            justify-content: space-between;
        }

        .mi-rules .mi-pages .mi-aptitude-list .mi-spann {
            /*float: left;*/
            min-height: 10px;
            background-color: #ffffff;
        }

        .mi-list-banner {
            width: 296px;
        }

        .mi-list-banner .mi-menu-container #mi-J_menu .mi-menuExtend {
            padding: 0;
            margin: 0 55px;

            width: 186px;

            font-size: 16px;
            line-height: 34px;
            color: #333333;
            cursor: pointer;
            transition: all 0.4s;

            display: block;
            position: relative;
        }

        .mi-list-banner .mi-menu-container #mi-J_menu .mi-menuList .mi-menuExtend.active {
            color: #ff6700;
        }

        .mi-list-banner .mi-menu-container #mi-J_menu .mi-menuList .mi-menuExtend:hover {
            color: #ff6700;
        }

        .mi-list-banner .mi-menu-container #mi-J_menu .mi-menuList > ul {
            margin: 10px 0px;
            padding: 3px 58px;
            /*负责子列表的展开和隐藏*/
            display: none;
        }

        .mi-list-banner .mi-menu-container #mi-J_menu .mi-menuList:nth-child(1) > ul {
            display: block;
        }

        .mi-list-banner .mi-menu-container #mi-J_menu .mi-menuList > ul li {
            margin-left: 10px;
            margin-bottom: 5px;
            font-size: 14px;
            line-height: 21px;
            color: #757575;
            cursor: pointer;
            display: block;
        }

        .mi-list-banner .mi-menu-container #mi-J_menu .mi-menuList > ul li.active {
            color: #ff6700;
        }

        .mi-list-banner .mi-menu-container #mi-J_menu .mi-menuList > ul li:hover {
            color: #ff6700;
        }

        .mi-list-content {
            width: 916px;
        }

        .mi-list-content #mi-contentBox {
            width: 816px;
            margin: 0 50px;
        }

        .mi-list-content #mi-contentBox #mi-J_list #mi-content-titie {
            font-size: 24px;
            font-weight: 400;
        }

        .mi-J_download {
            display: block;
            margin: 10px 0px 30px 0px;
            padding: 0;
            width: 158px;
            height: 38px;

            background-color: #ff6700;
            color: #ffffff;
            /*border-radius: 5px;*/
            font-size: 14px;
            line-height: 38px;
            text-align: center;
            text-decoration: none;

            cursor: pointer;
            transition: all 0.4s;
        }

        .mi-J_download:hover {
            background-color: rgb(186, 71, 11);
        }
    </style>
</head>

<body>
<%--导入网页头部--%>
<jsp:include page="/good/head.jsp"/>

<div class="mi-rules">
    <div class="mi-pages">
        <!--“购物流程”导航栏-->
        <div class="mi-breadcrumbs">
            <div class="mi-container">
                <span>
                    <a href=" ">首页</a>
                    <span>/</span>
                </span>
                <span>
                    <a href=" " id="4a02700bcb4b95e1">购物流程</a>
                </span>

            </div>
        </div>
        <!--“购物流程”主体-->
        <div class="mi-container mi-aptitude-list">
            <!--“购物流程”左侧导航-->
            <div class="mi-spann mi-list-banner">
                <div class="mi-menu-container">
                    <div id="mi-J_menu" class="agreement-box">
                        <div id="span1" class="mi-menuList">
                            <a class="mi-menuExtend active">购物指南和订购规则</a>
                            <ul>
                                <li id="span1-1" class="mi-menuItem active">购物流程</li>
                                <li id="span1-2" class="mi-menuItem">订单规则</li>
                                <li id="span1-3" class="mi-menuItem">发票规则</li>
                                <li id="span1-4" class="mi-menuItem">商品评价管理规则</li>
                            </ul>
                        </div>
                        <div id="span2" class="mi-menuList">
                            <a class="mi-menuExtend">发货配送</a>
                            <ul>
                                <li id="span2-1" class="mi-menuItem">包邮政策</li>
                                <li id="span2-2" class="mi-menuItem">配送范围</li>
                                <li id="span2-3" class="mi-menuItem">发货</li>
                                <li id="span2-4" class="mi-menuItem">配送与验货</li>
                                <li id="span2-5" class="mi-menuItem">拒收</li>
                            </ul>
                        </div>
                        <div id="span3" class="mi-menuList">
                            <a class="mi-menuExtend">售后服务</a>
                            <ul>
                                <li id="span3-1" class="mi-menuItem">自营产品售后规则</li>
                                <li id="span3-2" class="mi-menuItem">第三方商家产品售后规则</li>
                            </ul>
                        </div>
                        <div id="span4" class="mi-menuList">
                            <a class="mi-menuExtend">支付及优惠券使用</a>
                            <ul>
                                <li id="span4-1" class="mi-menuItem">支付规则</li>
                                <li id="span4-2" class="mi-menuItem">优惠券规则</li>
                            </ul>
                            <!--<ul>-->
                            <!--    <li id="span4-1" class="mi-menuItem"></li>-->
                            <!--    <li id="span4-2" class="mi-menuItem"></li>-->
                            <!--    <li id="span4-3" class="mi-menuItem"></li>-->
                            <!--    <li id="span4-4" class="mi-menuItem"></li>-->
                            <!--    <li id="span4-5" class="mi-menuItem"></li>-->
                            <!--    <li id="span4-6" class="mi-menuItem"></li>-->
                            <!--    <li id="span4-7" class="mi-menuItem"></li>-->
                            <!--    <li id="span4-8" class="mi-menuItem"></li>-->
                            <!--</ul>-->
                        </div>
                        <div id="span5" class="mi-menuList">
                            <a class="mi-menuExtend">账户规则</a>
                            <ul>
                                <li id="span5-1" class="mi-menuItem">用户账户安全</li>
                                <li id="span5-2" class="mi-menuItem">小米会员积分规则</li>
                            </ul>
                        </div>
                        <div id="span6" class="mi-menuList">
                            <a class="mi-menuExtend">知识产权侵权处理规则</a>
                            <ul>
                                <li id="span6-1" class="mi-menuItem">知识产权侵权处理规则</li>
                            </ul>
                        </div>
                        <div id="span7" class="mi-menuList">
                            <a class="mi-menuExtend">特色服务</a>
                        </div>
                        <div id="span8" class="mi-menuList">
                            <a class="mi-menuExtend">食品安全管理制度</a>
                        </div>
                        <div id="span9" class="mi-menuList">
                            <a class="mi-menuExtend">第三方商品质量管理规则</a>
                        </div>
                        <div id="span10" class="mi-menuList">
                            <a class="mi-menuExtend">商家违规行为及处理规则</a>
                        </div>
                        <div id="span11" class="mi-menuList">
                            <a class="mi-menuExtend">平台纠纷处理规则</a>
                        </div>
                        <div id="span12" class="mi-menuList">
                            <a class="mi-menuExtend">自营商品评价管理规则</a>
                        </div>
                        <div id="span13" class="mi-menuList">
                            <a class="mi-menuExtend">第三方商品评价管理规则</a>
                        </div>
                        <div id="span14" class="mi-menuList">
                            <a class="mi-menuExtend">异常订单处理规则</a>
                        </div>
                        <div id="span15" class="mi-menuList">
                            <a class="mi-menuExtend">商城协议</a>
                        </div>
                        <div id="span16" class="mi-menuList">
                            <a class="mi-menuExtend">规则动态</a>
                        </div>
                        <div id="span17" class="mi-menuList">
                            <a class="mi-menuExtend">历史规则</a>
                        </div>
                        <div id="span18" class="mi-menuList">
                            <a class="mi-menuExtend">客户服务</a>
                        </div>
                        <div id="span19" class="mi-menuList">
                            <a class="mi-menuExtend">平台内商家投诉公示</a>
                        </div>
                        <div id="span20" class="mi-menuList">
                            <a class="mi-menuExtend">小米商城资质证照</a>
                        </div>
                    </div>
                </div>
            </div>
            <!--“购物流程”正文-->
            <div class="mi-spann mi-list-content">
                <div id="mi-contentBox" class="agreement-box"> <!--width: 816px;margin: 0 50px;-->
                    <div id="mi-J_list">
                        <h2 id="mi-content-titie">购物流程</h2>
                        <hr>
                        <div class="mi-list-text"> <!--width: 816px-->
                            <!--span1-1-->
                            <p>
                                1、购物流程示意图
                                <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/36c6466929e83ac950baa659320560cc.png"
                                     style="width: 816px;"
                                     alt="">
                                2、在订单结算之前，请您再次检查订单信息并确认无误。</p>
                            <p> 3、如相关产品已经下线或无货，则您之前添加到购物车中的商品将无法购买。</p>
                            <a class="mi-J_download"
                               href="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/b138e63cc4b2b6c4c665ceeec7b4ef4d.pdf"
                               target="_blank">下载</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<%--导入网页尾部--%>
<jsp:include page="footer.jsp"/>


<script src="/static/js/jquery.min.js"></script>
<script>
    let curMenuExtendActive = $(".mi-menuExtend.active");
    let curMenuItemActive = $(".mi-menuItem.active");
    let curMenuExtendSelect = null;
    let curMenuItemSelect = null;


    $(".mi-menuExtend").click(function (event) {
        curMenuExtendSelect = $(this);

        let list = curMenuExtendSelect.parent().children("ul");

        list.slideToggle(200);
    });

    $(".mi-menuItem").click(function (event) {
        curMenuItemSelect = $(this);
        // console.log(curMenuItemSelect.text());
        // console.log(curMenuItemSelect.attr("id"));

        curMenuExtendSelect = curMenuItemSelect.parent().parent().children(".mi-menuExtend");
        // console.log(curMenuExtendSelect.parent().attr("id"));
        // console.log(curMenuExtendActive.parent().attr("id"));

        //如果当前点选的标签不是活动标签
        //则将点击的标签改为活动标签，将上一个活动那个标签改回成非活动标签
        if (curMenuExtendSelect.parent().attr("id") !== curMenuExtendActive.parent().attr("id")) {
            console.log("MenuExtend changed");
            curMenuExtendSelect.addClass("active");
            curMenuExtendActive.removeClass("active");
            curMenuExtendActive = curMenuExtendSelect;
        }

        //如果选择的子标签与活动子标签不同，则重新设定活动子标签
        //并重写右边正文部分
        if (curMenuItemActive.attr("id") !== curMenuItemSelect.attr("id")) {
            console.log("MenuItem changed");
            curMenuItemSelect.addClass("active");
            curMenuItemActive.removeClass("active");
            curMenuItemActive = curMenuItemSelect;

            $("#4a02700bcb4b95e1").text(curMenuItemActive.text()); //替换顶部导航栏的部分文字
            $("#mi-content-titie").text(curMenuItemActive.text()); //替换正文的标题

            // console.log(reloadText(curMenuItemActive.attr("id")));
            $(".mi-list-text").html(reloadText(curMenuItemActive.attr("id")));
        }
    });
    //************************************************
    //************以下内容用于重新加载协议正文************
    //************************************************
    function reloadText(id) {
        switch (id) {
            case 'span1-1':
                return "<p>1、购物流程示意图 <img src=\"https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/36c6466929e83ac950baa659320560cc.png\" style=\"width: 816px;\" alt=\"\"> 2、在订单结算之前，请您再次检查订单信息并确认无误。</p> <p> 3、如相关产品已经下线或无货，则您之前添加到购物车中的商品将无法购买。</p> <a class=\"mi-J_download \" href=\"https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/b138e63cc4b2b6c4c665ceeec7b4ef4d.pdf\" target=\"_blank\">下载</a>"
                break;
            case 'span1-2':
                return "<p>1、订单提交     已下单商品，请在小米提示的时间内点击付款，如您在小米提示的时间内未进行付款的，订单将会自动关闭；如相关商品小米另有规定的，以具体规定为准。     当出现订单信息填写不完整、商品无货、地址信息不匹配等情形时，订单有可能无法提交成功。</p> <p>2、订单查询     生成订单后，您可随时登录小米商城，打开“我的订单”或相关订单查询页面，查询订单信息。</p> <p>3、修改订单     您在小米商城下单后，在您选购的商品订单发货之前，您仅可以修改您的订单收货地址，如商城订单规则另有规定的，以具体规定为准。订单发货后您的订单信息将无法进行修改，如具体商品另有规定的，以具体规定为准。     如您需要修改订单的，请按照小米商城页面提示进行验证并填写信息，填写完毕点击确认提交后，经系统确认的，视为您的订单修改完成。     如您的商品订单页面没有显示修改订单按钮，说明您的订单无法进行修改。当您点击修改按钮时，系统需要一定的时间锁定您的订单，如在此期间您的订单已进入发货流程，您有可能无法对订单进行修改。</p> <p>4、取消订单     订单发货之前，您可以在订单页面点击取消订单按钮，经系统确认后，订单取消。订单取消后如您需要再次购买订单商品的，请您重新下单。     订单取消后，您已经支付的款项将退还至您的付款账户，退款过程中如银行或第三方支付机构向您收取任何手续费或其他费用，应由您自行承担。如您使用F码或全部、部分使用优惠券购买小米商城商品，F码或优惠券将无法退还，具体商品另有规定的除外。     如您的商品订单页面没有取消订单的按钮，说明您的订单已经进入了发货流程，您的订单将无法取消。</p> <p>5、订单拒收     订单商品到达您指定的收货地址后，如您拒绝签收或无法联系到您本人进行签收，视为订单拒收，小米将会取消该订单并退还您已经支付的款项。并请您按照小米商城的流程办理。</p> <p>6、订单异常     如您的订单出现订单状态长时间没有变化、无法查询到订单信息、收到的商品与订单不符等情况，请您直接联系小米商城客服进行处理。</p> <a class=\"mi-J_download\"    href=\"https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/2a962fde8624484a45dc68395337e508.pdf\"    target=\"_blank\">下载</a>"
                break;
            case "span1-3":
                return "<p>1、小米为您开具的发票为电子发票， ⼩米开具的电⼦发票均为真实有效的合法发票，与传统纸质发票具有同等法律效⼒，可作为⽤户维权、保修的有效凭据。</p> <p>2、开具发票时，您应按照系统及相关法律要求，填写各类发票信息（如单位名称和纳税人识别号等信息），否则小米将无法为您开具发票。</p> <p>3、发票的金额为您实际支付的商品金额，不包含优惠券、礼品券、抵扣券或其他小米给与您的优惠部分的价格。</p> <p>4、您的电子发票开具完成后，您可以登录小米个人账户，在订单详情页中查看和下载电子发票。</p> <p>     5、如您需要退货，您应提供小米商城对您开具的发票，如开具的增值税专用发票丢失的，您需按照相关法律法规要求提供有关文件，否则可能无法为您办理退货。如您开具电子发票后申请退货，原电子发票会通过系统自动冲红（电子发票显示无效），如您只是申请订单中部分商品退货，小米商城将对未发生退货部分的商品重新开具发票。换货无需退回发票，原发票继续有效。</p> <p>6、第三方商家商品发票规则、发票形式等内容以第三方商家说明为准。</p> <p>7、如您以您的个人账户在小米商城购买商品，小米商城将无法为您开具企业发票。</p> <a class=\"mi-J_download\"    href=\"https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/4600379dcd284c376b2cf4c47244958c.pdf\"    target=\"_blank\">下载</a>"
                break;
            case "span1-4":
                return "<p>本规则适用于小米商城上的所有商家和消费者。</p> <p>二、定义</p> <p>2.1评价：指消费者在订单交易完成后，交易双方可以对交易的订单进行的评价，评价也包括小米商城商家对消费者评价的回复。</p> <p>2.2商品评价：指消费者针对订单商品给出的评分、评价和晒单等内容，包括对商品本身以及小米商城或第三方商家提供的服务。 </p> <p>2.4恶意评价：指消费者或商家使用侮辱性、诽谤性语言或者明显违背事实的内容进行的评价或者其他违反法律规定的评价。</p> <p>三、评价管理及要求</p> <p>3.1消费者可对购买时间不超过60天的商品订单进行评价，同一订单消费者晒图最多可上传6张图片。</p> <p>3.2评价及回复内容要求</p> <p>3.2.1商家或消费者发布的评价内容、晒图和回复中不得出现法律法规、平台规则不允许的内容，包括但不限于：     1）     危害国家安全、泄露国家秘密、颠覆国家政权、破坏国家统一、损害国家荣誉和利益的；煽动民族仇恨或歧视、破坏民族团结的；破坏国家宗教政策，宣扬邪教和封建迷信的；散布谣言，扰乱社会秩序，破坏社会稳定的；     散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；侮辱或者诽谤他人，侵害他人合法权益的（包括但不限于知识产权）；含有病毒或其他恶意扣费代码的网页或软件内容的。     2）利用评价展示非小米商城的其他商品、商家信息包括但不仅限于店铺、商品链接、联系信息等；     3）评价图片、视频与评价商品无关或图片、视频不清晰的。     4）未经他人同意，使用第三人拥有著作权的作品或他人图片并编辑后发布的；     5）评价与所购买的商品或服务无关的；     6) 恶意购买人的评价；     7）其他涉嫌违法违规或侵犯小米及第三方合法权益的情形；</p> <p>3.3违规评价处理</p> <p>3.3.1如果消费者或商家违反本规则规定进行恶意评价的，商家或消费者向小米商城发起投诉，小米商城将根据投诉人提供的证明材料进行审核，经小米商城判定为恶意评价的，小米商城有权屏蔽或删除该评价。</p> <p>3.3.2小米商城有权删除违规交易产生的评价，包括但不限于发布违禁信息、骗取他人财物、虚假交易等违规行为所涉及的订单对应的评价。小米商城有权对排查到的评价进行屏蔽、删除等处理。 </p> <p>四、评价侵权处理</p> <p>4.1 因消费者或商家发布的评论包含的图片、文字或其他任何信息，导致任何第三方将小米商城起诉至法院、投诉或举报至相关部门，或对小米提起仲裁或诉讼的，小米有权按照法律规定，向人民法院、行政机关、仲裁机关的要求公布涉案消费者、商家的相关信息</p> <p>4.2 因消费者或商家违反本规则规定，导致小米遭受损失的，小米有权要求商家或消费者赔偿因此给小米造成的损失，包括但不限于小米因此需要赔偿的损失、行政机关的罚款、律师费、公证费以及其他相关费用。</p> <a class=\"mi-J_download\"    href=\"https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/a5bdb7abb10e955424acfcab050bf773.pdf\"    target=\"_blank\">下载</a>"
                break;
            case 'span2-1':
                return "<p>包邮政策及具体商品的运费以结算页面显示为准。优惠券及现金券不能抵扣运费金额，小米另有规定的除外。</p> <a class=\"mi-J_download\" href=\"https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/7915802093ee88769bc97a20770ee97c.pdf\" target=\"_blank\">下载</a>"
                break;
            case "span2-2":
                return "<p>您在小米商城购买的商品目前仅支持中国大陆地区的配送(不含港澳台)，目前不支持海外其他国家或地区的配送。具体可支持配送地区请您查看商品页面。</p> <a class=\"mi-J_download\"    href=\"https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/612201e3ec7c3af3364aaabff7780f1f.pdf\" target=\"_blank\">下载</a>"
                break;
        }

        return null;

    }
</script>
</body>
</html>
